<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
</head>
<body id="particles-js">
<div class="login" id="login">
    <div id="myDiv">
        <h3>传智健康</h3>
        <ul class="log-form">
            <li>
                <i class="name"></i>
                <input v-model="username" name="username" id="username" type="text"
                       placeholder="请输入用户名" onblur="this.placeholder='请输入用户名'" required>
                <label for="username">用户名</label>
            </li>
            <li>
                <i class="password"></i>
                <input v-model="password" name="password" id="password" type="password"
                       placeholder="请输入密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'" required>
                <label for="password">密码</label>
            </li>
        </ul>
        <div class="login-button ">
            <button class="login-button" style="border: 0px;width: 100%" @click="login">登录</button>
        </div>
        <br/>
        <input v-model="remember" name="remember" id="remember" type="checkbox" value="yes" checked>
        <label for="remember">记住密码</label>
        <input v-model="autoLogin" name="autoLogin" id="autoLogin" type="checkbox" value="yes">
        <label for="autoLogin">自动登录</label>
        <span>
            <a href="register.html">&nbsp;&nbsp;&nbsp;免费注册&nbsp;&nbsp;|</a>
        </span>
        <span>
            <!-- 跳转修改密码界面 -->
            <a href="/user/toForget">忘记密码</a>
        </span>
    </div>
</div>
<div class="rotating-plane" id="shape"></div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script src="./js/particles.min.js"></script>
<script src="./js/app.js"></script>
<script>
    window.onload = function () {
        // 勾选自动登录，默认勾选记住密码
        document.getElementById("autoLogin").onclick = function () {
            if (document.getElementById("autoLogin").checked) {
                document.getElementById("remember").checked = true;
            }
        }
        // 没勾选记住密码，自动不勾选自动登录
        document.getElementById("remember").onclick = function () {
            if (!document.getElementById("remember").checked) {
                document.getElementById("autoLogin").checked = false;
            }
        }

        let vue = new Vue({
            el: "#myDiv",
            data: {
                username: "",
                password: "",
                remember: "yes",
                autoLogin: "yes"

            },
            created() {
                axios.get("/user/autoLogin.do")
                    .then(res => {
                        if (res.data.flag) {
                            window.location.href = "/pages/main.html";
                        } else {
                            axios.get("/user/getCookie.do").then(res => {
                                this.username = res.data.username;
                                this.password = res.data.password;
                            })
                        }
                    })
            },
            methods: {
                login() {
                    axios.get("/user/login.do?username=" + this.username + "&password=" + this.password + "&remember=" + this.remember + "&autoLogin=" + this.autoLogin)
                        .then(res => {
                            if (res.data.flag) {
                                window.location.href = "/pages/main.html";
                            } else {
                                alert(res.data.message);
                            }
                        })
                }
            }
        });
    };
</script>
</html>